<template>
  <!-- 底部右侧按钮 -->
  <div class="updn clearfix">
    <div class="left">
      <a href="javascript:;" class="btn-base" @click="show" :class="btn"></a>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
  name: "FloorButton",
  props: {
    show1: {
      type: Function,
    },
  },

  setup(props) {
    //  当浏览器本地储存没有flag值时，进行初始化
    if (window.localStorage.getItem("flag") === null) {
      window.localStorage.setItem("flag", true);
    }
    // 将浏览器的flag值转换为布尔值
    let flag = ref(window.localStorage.getItem("flag") === "true" ? true : false);
    //  初始化执行一次
    props.show1(flag.value);
    //  是否锁定底部隐藏
    function show() {
      flag.value = window.localStorage.getItem("flag") === "true" ? false : true;
      window.localStorage.setItem("flag", flag.value);
      //  props 父组件   src/components/floorFuntionZone/FloorMain/FloorFrame.vue
      props.show1(flag.value);
    }
    //  开关按钮图标切换
    let btn = computed(() => {
      return flag.value ? "btn" : "btn-lock";
    });

    return {
      show,
      flag,
      btn,
    };
  },
};
</script>

<style scoped lang="less">
.updn {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateZ(100px);
  z-index: 100;

  .left {
    float: left;
    position: relative;
    left: 0;
    top: -14px;
    width: 52px;
    height: 67px;
    background: url("../../../common/images/playbar.png") no-repeat 0 -380px;
  }
  .right {
    float: right;
    right: 0;
    width: 15px;
    height: 54px;
    background: url("../../../common/images/playbar.png") no-repeat -52px -393px;
  }
}
.btn-lock {
  background-position: -100px -380px;
  &:hover {
    background-position: -100px -400px;
  }
}
.btn-base {
  display: block;
  width: 18px;
  height: 18px;
  margin: 6px 0 0 17px;
  background-image: url("../../../common/images/playbar.png");
  background-repeat: no-repeat;
}
.btn {
  background-position: -80px -380px;
  &:hover {
    background-position: -80px -400px;
  }
}
</style>
